<template>
	<div class="register-wrapper">
		<div class="register-container">
			<div class="register-box">
				<!-- 左侧装饰区域 -->
				<div class="register-decoration">
					<div class="decoration-content">
						<h1>创建账号</h1>
						<h2>加入我们</h2>
						<p>Start your journey with our platform</p>
					</div>
				</div>
				
				<!-- 右侧注册区域 -->
				<div class="register-content">
					<div class="register-header">
						<h2>用户注册</h2>
						<p>Please fill in the form to create your account</p>
					</div>
					
					<el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-position="top" class="register-form">
						<!-- 角色选择 -->
						<el-form-item label="注册角色" prop="role">
							<el-select v-model="dataForm.role" placeholder="请选择注册角色">
								<el-option label="管理员" :value="0"></el-option>
								<el-option label="用人单位" :value="1"></el-option>
								<el-option label="求职者" :value="2"></el-option>
							</el-select>
						</el-form-item>
						
						<!-- 基本信息 -->
						<div class="form-section">
							<h3>基本信息</h3>
							<el-form-item label="邮箱" prop="email">
								<el-input v-model="dataForm.email" placeholder="请输入邮箱">
									<i slot="prefix" class="el-icon-message"></i>
									<el-button slot="append" @click="sendCode" :disabled="!!timer" class="code-btn">
										{{ timer ? `${countdown}s` : '获取验证码' }}
									</el-button>
								</el-input>
							</el-form-item>
							
							<el-form-item label="验证码" prop="code">
								<el-input v-model="dataForm.code" placeholder="请输入验证码">
									<i slot="prefix" class="el-icon-key"></i>
								</el-input>
							</el-form-item>
							
							<el-form-item label="用户名" prop="userName">
								<el-input v-model="dataForm.userName" placeholder="请输入用户名">
									<i slot="prefix" class="el-icon-user"></i>
								</el-input>
							</el-form-item>
							
							<el-form-item label="手机号" prop="mobile">
								<el-input v-model="dataForm.mobile" placeholder="请输入手机号">
									<i slot="prefix" class="el-icon-mobile-phone"></i>
								</el-input>
							</el-form-item>
						</div>
						
						<!-- 角色特定信息 -->
						<div class="form-section" v-if="dataForm.role === 2">
							<h3>求职者信息</h3>
							<el-form-item label="姓名" prop="name">
								<el-input v-model="dataForm.name" placeholder="请输入姓名">
									<i slot="prefix" class="el-icon-user"></i>
								</el-input>
							</el-form-item>
							
							<el-row :gutter="20">
								<el-col :span="12">
									<el-form-item label="性别" prop="gender">
										<el-select v-model="dataForm.gender" placeholder="请选择性别">
											<el-option label="男" value="M"></el-option>
											<el-option label="女" value="F"></el-option>
										</el-select>
									</el-form-item>
								</el-col>
								<el-col :span="12">
									<el-form-item label="年龄" prop="age">
										<el-input v-model.number="dataForm.age" placeholder="请输入年龄">
											<i slot="prefix" class="el-icon-date"></i>
										</el-input>
									</el-form-item>
								</el-col>
							</el-row>
						</div>
						
						<div class="form-section" v-if="dataForm.role === 1">
							<h3>企业信息</h3>
							<el-form-item label="企业名称" prop="employerName">
								<el-input v-model="dataForm.employerName" placeholder="请输入企业名称">
									<i slot="prefix" class="el-icon-office-building"></i>
								</el-input>
							</el-form-item>
							
							<el-form-item label="企业地址" prop="address">
								<el-input v-model="dataForm.address" placeholder="请输入企业地址">
									<i slot="prefix" class="el-icon-location"></i>
								</el-input>
							</el-form-item>
						</div>
						
						<!-- 密码设置 -->
						<div class="form-section">
							<h3>密码设置</h3>
							<el-form-item label="密码" prop="password">
								<el-input v-model="dataForm.password" type="password" placeholder="请输入密码">
									<i slot="prefix" class="el-icon-lock"></i>
								</el-input>
							</el-form-item>
							
							<el-form-item label="确认密码" prop="confirmPassword">
								<el-input v-model="dataForm.confirmPassword" type="password" placeholder="请确认密码">
									<i slot="prefix" class="el-icon-lock"></i>
								</el-input>
							</el-form-item>
						</div>
						
						<!-- 按钮组 -->
						<div class="form-actions">
							<el-button type="primary" @click="dataFormSubmit" class="submit-btn">注册</el-button>
							<el-button @click="$router.push({ name: 'Login' })" class="login-btn">返回登录</el-button>
						</div>
					</el-form>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { registerByEmail, sendEmailCode } from '@/http/auth.js'

export default {
	data() {
		const validatePass = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请输入密码'))
			} else {
				if (this.dataForm.confirmPassword !== '') {
					this.$refs.dataForm.validateField('confirmPassword')
				}
				callback()
			}
		}
		const validatePass2 = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请再次输入密码'))
			} else if (value !== this.dataForm.password) {
				callback(new Error('两次输入密码不一致!'))
			} else {
				callback()
			}
		}
		const validateMobile = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请输入手机号'))
			} else if (!/^1[3-9]\d{9}$/.test(value)) {
				callback(new Error('请输入正确的手机号'))
			} else {
				callback()
			}
		}
		const validateAge = (rule, value, callback) => {
			if (!value) {
				callback(new Error('请输入年龄'))
			} else if (!Number.isInteger(value)) {
				callback(new Error('请输入数字值'))
			} else if (value < 16 || value > 100) {
				callback(new Error('年龄必须在16-100之间'))
			} else {
				callback()
			}
		}
		return {
			dataForm: {
				role: '',
				email: '',
				code: '',
				userName: '',
				mobile: '',
				password: '',
				confirmPassword: '',
				// 求职者特有字段
				name: '',
				gender: '',
				age: '',
				// 用人单位特有字段
				employerName: '',
				address: ''
			},
			timer: null,
			countdown: 0,
			dataRule: {
				role: [{
					required: true,
					message: '请选择注册角色',
					trigger: 'change'
				}],
				email: [{
					required: true,
					message: '请输入邮箱',
					trigger: 'blur'
				}, {
					type: 'email',
					message: '请输入正确的邮箱格式',
					trigger: 'blur'
				}],
				code: [{
					required: true,
					message: '请输入验证码',
					trigger: 'blur'
				}],
				userName: [{
					required: true,
					message: '请输入用户名',
					trigger: 'blur'
				}],
				mobile: [{
					required: true,
					validator: validateMobile,
					trigger: 'blur'
				}],
				password: [{
					required: true,
					validator: validatePass,
					trigger: 'blur'
				}],
				confirmPassword: [{
					required: true,
					validator: validatePass2,
					trigger: 'blur'
				}],
				// 求职者特有字段验证规则
				name: [{
					required: true,
					message: '请输入姓名',
					trigger: 'blur'
				}],
				gender: [{
					required: true,
					message: '请选择性别',
					trigger: 'change'
				}],
				age: [{
					required: true,
					validator: validateAge,
					trigger: 'blur'
				}],
				// 用人单位特有字段验证规则
				employerName: [{
					required: true,
					message: '请输入企业名称',
					trigger: 'blur'
				}],
				address: [{
					required: true,
					message: '请输入企业地址',
					trigger: 'blur'
				}]
			}
		}
	},
	methods: {
		// 发送验证码
		async sendCode() {
			try {
				await this.$refs.dataForm.validateField('email')
				await sendEmailCode(this.dataForm.email)
				this.$message.success('验证码发送成功')
				this.countdown = 60
				this.timer = setInterval(() => {
					if (this.countdown > 0) {
						this.countdown--
					} else {
						clearInterval(this.timer)
						this.timer = null
					}
				}, 1000)
			} catch (error) {
				this.$message.error(error.message || '验证码发送失败')
			}
		},
		// 提交注册表单
		async dataFormSubmit() {
			try {
				await this.$refs.dataForm.validate()
				const registerData = {
					role: this.dataForm.role,
					email: this.dataForm.email,
					code: this.dataForm.code,
					userName: this.dataForm.userName,
					mobile: this.dataForm.mobile,
					password: this.dataForm.password
				}

				// 根据角色添加额外字段
				if (this.dataForm.role === 2) {
					Object.assign(registerData, {
						name: this.dataForm.name,
						gender: this.dataForm.gender,
						age: this.dataForm.age,
						contactNumber: this.dataForm.mobile
					})
				} else if (this.dataForm.role === 1) {
					Object.assign(registerData, {
						employerName: this.dataForm.employerName,
						address: this.dataForm.address,
						contactNumber: this.dataForm.mobile
					})
				}

				await registerByEmail(registerData)
				this.$message.success('注册成功')
				this.$router.push({ name: 'Login' })
			} catch (error) {
				this.$message.error(error.message || '注册失败')
			}
		}
	},
	beforeDestroy() {
		if (this.timer) {
			clearInterval(this.timer)
		}
	}
}
</script>

<style scoped>
.register-wrapper {
	min-height: 100vh;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.register-container {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
}

.register-box {
	background: rgba(255, 255, 255, 0.95);
	border-radius: 20px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
	display: flex;
	overflow: hidden;
	backdrop-filter: blur(10px);
}

.register-decoration {
	width: 400px;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	padding: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	text-align: center;
	
	.decoration-content {
		h1 {
			font-size: 32px;
			margin-bottom: 10px;
			font-weight: 600;
		}
		
		h2 {
			font-size: 24px;
			margin-bottom: 20px;
			font-weight: 500;
		}
		
		p {
			font-size: 16px;
			opacity: 0.8;
		}
	}
}

.register-content {
	flex: 1;
	padding: 40px;
	max-height: 90vh;
	overflow-y: auto;
	
	.register-header {
		text-align: center;
		margin-bottom: 30px;
		
		h2 {
			font-size: 24px;
			color: #333;
			margin-bottom: 10px;
		}
		
		p {
			color: #666;
			font-size: 14px;
		}
	}
}

.form-section {
	margin-bottom: 30px;
	padding: 20px;
	background: #f8f9fa;
	border-radius: 15px;
	
	h3 {
		font-size: 18px;
		color: #333;
		margin-bottom: 20px;
		padding-bottom: 10px;
		border-bottom: 1px solid #eee;
	}
}

.el-input {
	:deep(.el-input__inner) {
		height: 45px;
		line-height: 45px;
		border-radius: 22.5px;
		border: 1px solid #ddd;
		padding-left: 45px;
		font-size: 14px;
		
		&:focus {
			border-color: #667eea;
			box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
		}
	}
	
	:deep(.el-input__prefix) {
		left: 15px;
		color: #999;
	}
}

.el-select {
	width: 100%;
	
	:deep(.el-input__inner) {
		padding-left: 15px;
	}
}

.form-actions {
	display: flex;
	gap: 20px;
	margin-top: 30px;
	
	.submit-btn, .login-btn {
		flex: 1;
		height: 45px;
		border-radius: 22.5px;
		font-size: 16px;
	}
	
	.submit-btn {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		border: none;
		
		&:hover {
			background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
		}
	}
	
	.login-btn {
		background: transparent;
		border: 1px solid #667eea;
		color: #667eea;
		
		&:hover {
			background: rgba(102, 126, 234, 0.1);
		}
	}
}

.code-btn {
	background: transparent;
	border: none;
	color: #667eea;
	font-size: 14px;
	padding: 0 15px;
	
	&:hover:not(:disabled) {
		color: #764ba2;
	}
	
	&:disabled {
		color: #999;
	}
}

@media (max-width: 992px) {
	.register-box {
		flex-direction: column;
	}
	
	.register-decoration {
		width: 100%;
		padding: 30px;
	}
	
	.register-content {
		padding: 30px;
	}
}

/* 自定义滚动条 */
.register-content {
	&::-webkit-scrollbar {
		width: 6px;
	}
	
	&::-webkit-scrollbar-track {
		background: #f1f1f1;
		border-radius: 3px;
	}
	
	&::-webkit-scrollbar-thumb {
		background: #888;
		border-radius: 3px;
		
		&:hover {
			background: #666;
		}
	}
}
</style> 